<template>
	<div class="cartcontrol">
		<transition name="fade"> <!-- 外层渐变,减号图标-->
            <div class="cart-del" v-show="food.count>0" @click.stop.prevent="cartDel($event)">
                <transition name="inner"> <!-- 内层滚动，滚动时包含字体，字体在inner中-->
                    <span class="inner icon-remove_circle_outline"></span>
                </transition>
            </div>
       </transition>
		<div class="cart-count" v-show="food.count>0">{{food.count}}</div>
		<div class="cart-add icon-add_circle" @click.stop.prevent="addcart($event)"></div>
	</div>
</template>

<script>
	import Vue from "vue"
	export default{
		props:{
			food:{
				type:Object
			}
		},
		methods:{
			addcart(event){
				if(!this.food.count){
					Vue.set(this.food,'count',1)
				}else{
					
					this.food.count++
				}
				this.$emit('cart-add', event.target);
			},
			cartDel(event){
				if(this.food.count){
					this.food.count--
				}
				
			}
		}
	}
</script>

<style lang="stylus">
	.cartcontrol
		font-size:0
		.cart-del
			display:inline-block
			padding:6px
			transition:all 0.3 liner
			&.fade-enter-active, &.fade-leave-active
				transition:all 0.4s linear
				opacity:1
				transform:translate3d(0,0,0)
			&.fade-enter, &.fade-leave-active
				opacity:0
				transform:translate3d(24px,0,0)
			.inner
				line-height:24px
				font-size:24px
				vertical-align:top
				color:rgb(0,160,220)
				&.inner-enter-active, &.inner-leave-active
					transition:all 0.4s linear
					opacity:1
					transform:rotate(0)	
				&.inner-enter, &.inner-leave-active
					opacity:0
					transform:rotate(180deg)
		.cart-del
			color:rgb(0,160,220)
		.cart-count
			display:inline-block
			font-size:10px
			vertical-align:top
			width:12px
			padding-top:6px
			color:rgb(147,153,159)
			line-height:24px
		.cart-add
			display:inline-block
			font-size:24px
			line-height:24px
			padding:6px
			color:rgb(0,160,220)
</style>